@import "src/css/mixin";

#MyPack {
  background: #FFFFFF;
  .container{
    background-color:  #f7faff;
    padding-top: .44rem;
  }
  .page-header{
    width: 100%;
    height: .44rem;
    border-bottom: 1px solid #E3E8EE;
    position: fixed;
    top:0;
    margin: 0;
    padding: 0;
    z-index: 999;
    background: #fff;

    h4{
      line-height: .43rem;
      color: #212022;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;

    }
    .icon-return{
      width: .8rem;
      height: .44rem;
      display: block;
      line-height: .44rem;
      text-align: left;
      position: absolute;
      color: #b3b5b7;
      top: 0;
      left: 0;
      z-index: 3;
      font-size: .14rem;
      padding-left: .15rem;
    }
  }
  .currency{
    padding: .21rem 0.15rem .18rem;
    margin-bottom: .07rem;
    background: #fff;
    margin-right: -.2rem;
    margin-left: -.2rem;
  }
  h2{
    font-size: .15rem;
    color: $black;
    margin: 0;
    line-height: .15rem;
    font-weight: 600;
  }
  .count-title{
    font-size: .15rem;
    line-height: .15rem;
    font-weight: 600;
    color: $black;
    margin-bottom: .05rem;
    padding-top: .2rem;
  }
  .count-now{
    font-size: .3rem;
    line-height: .36rem;
    font-weight: 600;
    margin: 0 0 .15rem;
    color: $blue;
    height: .4rem;
  }
  .count-now small{
    font-size: .15rem;
    margin-left: 10px;
    font-weight: bold;
  }
  img{
    position: absolute;
    right: -.03rem;
    top: -.06rem;
    z-index: 1;
    height: .19rem;

  }
  .unit{
    display: inline-block;
    font-size: .15rem;
    color: $black;
    letter-spacing: 0;
    line-height: .15rem;
    margin-left: .1rem;
    font-weight: 600;
  }
  .hb-title{
    font-size: .15rem;
    font-weight: bold;
    color: $black;
    line-height: .15rem;
  }
  .currency-count{
    .count{
      display: inline-block;
      margin: .15rem 0 ;
      font-size: .36rem;
      font-weight: 600;
      line-height: .36rem;
      color: $blue;
    }
    .deadline{
      font-size: .12rem;
      color: #b1a152;
      line-height: .12rem;
      margin: 0;
      font-weight: 300;
    }
    .half-change{
      font-size: .16rem;
      color: #a28910;
      line-height: .16rem;
      margin: 0;
      margin-bottom: 0.08rem;
      font-weight: bold;
    }
  }
  .currency-discount{
    position: relative;
    background-image: url('/img/pack/bg.png');
    background-size: 100% 100%;
    width: 1.1rem;
    height: .6rem;
    text-align: center;
    padding: .13rem 0 0;
    border-radius: 3px;
    border: 1px solid $blue;
    margin-top: 0.08rem;
    .half-change{
      font-size: .15rem;
      margin-bottom: .15rem;
      line-height: 1;
      color: $blue;
      font-weight: bold;
    }
    .deadline{
      font-size: .12rem;
      color: #FFFFFF;
      letter-spacing: 0;
      line-height: .12rem;
      font-weight: 300;
    }
  }
  .currency-rechange{
    position: relative;
    height: .62rem;

    .pay-btn{
      position: relative;
      display: inline-block;
      margin-right: .07rem;
      background-color: #ffffff;
      border: 1px solid $blue;
      padding: .12rem 0;
      text-align: center;
      width: 1.09rem;
      border-radius: 3px;
      z-index: 9;
      height: .61rem;

      &:last-child{
        margin: 0;
      }

    }
    .no-margin{
      margin: 0;
    }
    .pay-btn:active{
      color: $blue;
      border: 1px solid $blue;
      .rechange-get,.rechange-pay,.year{
        color: $blue;
      }
    }
    .rechange-get{
      font-size: .15rem;
      line-height: .15rem;
      font-weight: bold;
      color: $blue;
      margin-bottom: .08rem;
    }
    .year{
      font-size: .12rem;
      font-weight: 600;
      color: $blue;
    }
    .rechange-pay{
      font-size: .12rem;
      line-height: .12rem;
      color: $blue;
      margin: 0;
      font-weight: 300;

      s{
        margin-right: 5px;
        color: #b3b5b7;
      }
    }
    .rechange-old-pay{
      text-decoration:line-through;
      margin-left: .05rem;
      font-weight: 500;
    }
    .pay-conut{
      position: relative;
      flex-grow: 1;
      text-align: left;
      width: 1.03rem;
      margin-right: .12rem;
    }
  }
  .currency-pay{
    padding: 0 0.15rem .15rem;
    margin-bottom: .07rem;
    background: #fff;
    margin-right: -.2rem;
    margin-left: -.2rem;
    position: relative;
  }
  .tip,.paidan{
    font-size: .12rem;
    line-height: .12rem;
    color: #83848e;
    margin-bottom:.15rem;
  }
  .dispatchset-has-time{
    width: .75rem;
    height: .26rem;
    top: -.15rem;
  }
  .half-point{
    background-image: url('/img/pack/halfPoint.png');
    background-size: 100% 100%;
    position: absolute;
    width: .6rem;
    height: .24rem;
    top: -.12rem;
    right: -.07rem;
    color: #fff;
    font-size: .1rem;
    line-height: .22rem;
    font-weight: 500;
    text-align: center;
    z-index: 1;
  }
  .gray-font{
    color: #b3b5b7;
  }
  .only-vip{
    background-image: url('/img/pack/vip.png');
    background-size: 100% 100%;
    width: .53rem;
    height: .16rem;
    color: #fff;
    font-size: .1rem;
    line-height: .24rem;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    margin-left: 0.04rem;
  }
  .cover{
    position: absolute;
    bottom: 0;
    height: 1.8rem;
    width: 100%;
    left: 0;
    z-index: 1;
  }

  .package-explain{
    padding: .36rem 0.2rem .65rem;
    background: #fff;
    margin-right: -.2rem;
    margin-left: -.2rem;
    h6{
      font-size: .18rem;
      font-weight: 600;
      line-height: .18rem;
      color: $black;
      margin-bottom: .15rem;
    }
    p{
      font-size: .13rem;
      font-weight: 300;
      line-height: 1.65;
      text-align: left;
      color: #b3b5b7;
      margin: 0;
    }
  }
  .font-bold{
    font-weight: 700;
  }
  .golden-color{
    color: #C66A19;
  }
  .no-vip{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    .count-title,.paidan,.count-now,.hb-title,.pay-btn,.rechange-get,.rechange-pay,.unit{
      color: $lightgray;
    }
    .pay-btn{
      border-color: $lightgray;
    }
    .only-vip{
      background-image: url('/img/pack/novip.png');
    }
  }

}
  
